<template>
  <div>
    <ul class="addon_list flex flex-wrap">
      <li
        v-for="(item, key) in addonList"
        :key="key"
        :class="{ choose: chooseAddonGroupId.includes(item.id) }"
        @click="onChooseAddon(item)"
      >
        <div class="cover">
          <div class="addons">
            <template v-for="(addon, k) in item.explain.addon_msg" :key="k">
              <div v-if="addon" class="addon_image">
                <el-image :src="addon.icon" />
              </div>
            </template>
          </div>
          <div class="mark">
            <el-icon><Check /></el-icon>
          </div>
          <div class="count">x {{ Object.keys(item.explain.addon_msg).length }}</div>
        </div>
        <div class="title">
          {{ item.name }}
        </div>
      </li>
    </ul>
    <el-pagination
      background
      layout="total,prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="pageSize"
      @current-change="currentChange"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { Check } from '@element-plus/icons-vue'
import { getAddonGroupList } from '@/api/addonAuth'

defineOptions({
  name: 'DkChooseAddonGroup'
})

const props = defineProps({
  addonGroupValue: {
    type: Array,
    default: () => []
  },
  addonGroupIds: {
    type: Array,
    default: () => []
  }
})

const visible = ref(false)
const dialogTableVisible = ref(true)
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const addonList = ref([])
const chooseAddonGroupId = ref([...props.addonGroupIds])
const chooseAddonGroupValue = ref([...props.addonGroupValue])
const searchData = ref({})

// 监听 addonGroupIds 变化
watch(
  () => props.addonGroupIds,
  (val) => {
    chooseAddonGroupId.value = [...val]
  },
  { deep: true }
)

// 选择应用
const onChooseAddon = (item) => {
  const index = chooseAddonGroupId.value.indexOf(item.id)
  if (index > -1) {
    chooseAddonGroupId.value.splice(index, 1)
    chooseAddonGroupValue.value.splice(index, 1)
  } else {
    chooseAddonGroupId.value.push(item.id)
    chooseAddonGroupValue.value.push(item)
  }
}

// 刷新列表
const refreshList = () => {
  chooseAddonGroupValue.value = []
}

// 分页
const currentChange = (newPage) => {
  page.value = newPage
  getList(newPage)
}

// 获取列表
const getList = (currentPage, type = 0) => {
  addonList.value = []
  currentPage = currentPage || page.value
  getAddonGroupList(currentPage, pageSize.value, searchData.value, type).then((res) => {
    addonList.value = res.data
    total.value = parseInt(res.msg)
  })
}

// 组件挂载时获取列表
onMounted(() => {
  getList()
})

// 暴露方法给父组件调用
defineExpose({
  refreshList
})
</script>

<style>
.addon_list {
  height: 320px;
}

.addon_list li {
  cursor: pointer;
  position: relative;
  width: calc(25% - 10px);
  margin: 5px;
}

.addon_list li:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.addon_list .cover {
  position: relative;
  height: 120px;
  border: 1px solid #ccc;
  border-bottom: none;
  overflow: hidden;
}

.addon_list .addons {
  width: 230px;
  padding: 10px;
}

.addon_list .addon_image {
  width: 45px;
  height: 45px;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
}

.addon_list .addon_image:nth-child(4n) {
  margin-right: 0;
}

.addon_list .mark {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 110px;
  font-size: 30px;
  background: rgba(0, 0, 0, 0.6);
  padding: 0;
  color: #fff;
}

.addon_list .op {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  line-height: 14px;
  color: #fff;
  background: #409eff;
}

.addon_list .count {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  line-height: 14px;
  color: #fff;
  background: #409eff;
}

.addon_list .cover:hover .op {
  display: block;
}

.addon_list li.choose .mark {
  display: block;
}

.addon_list .title {
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 12px;
  text-align: center;
}
</style>
